<template>
	<view class="page">
		<view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<image src="/static/flash_title.png" mode=""></image>
			</view>
		</view>
		<view class="head-bg">
			<view class="session" :class="{'activity':scrollTop > 50}">
				<view class="list action" v-for="(item,index) in activity_data"
					@click="spikesGoodsList(item.spikesActivityID)" :key="index">
					<text class="time">{{item.spikeStartTime}}</text>
					<text class="status">抢购中</text>
				</view>
				<view class="list">
					<text class="time">18:00 </text>
					<text class="status">即将开始</text>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<!-- 查询列表 --> <!-- onGoods 点击页面商品 -->
			<view v-if="isLoading" class="loading-tip">秒杀商品正在飞奔来的路上，请稍候...
				<br />
				<image :src="'https://preview.qiantucdn.com/58pic/34/82/70/42c58PICaf8cX8aFIfSfW_PIC2018.gif!qt480'"
					mode=""></image>
			</view>
			<view class="list" v-for="(item,index) in goods_data" @click="onGoods(item.goods_id,item.sku_id)"
				:key="index">
				<view class="thumb">
					<image style="width: 90px; height: 90px;" :src="item.goods_img"></image>
				</view>
				<view class="item">
					<view class="title">
						<text class="one-omit">{{item.goods_title}}</text>
					</view>
					<view class="price-data">
						<view class="price">
							<text>￥{{item.spikes_price}}</text>
							<text class="lineation ">￥{{item.goods_price}}</text>
						</view>
						<view class="data">
							<view class="btn">
								<text>立即抢购</text>
							</view>
							<view class="schedule">
								<view class="num">剩余{{item.spikes_stock}}件</view>
								<view class="bar">
									<text></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import spikes from '../api/spikes';
	export default {
		data() {
			return {
				scrollTop: 0,
				page: 1,
				pageSize: 10,
				spikes_activity_id: 0,

				goods_data: [],
				activity_data: [],
				isLoading: true
			};
		},
		// onPageScroll(e) {
		// 	this.page = e.scrollTop;
		// },
		onLoad() {
			//获取活动列表
			this.spikesActivityList()
			//获取秒杀商品列表
			this.spikesGoodsList(this.page)
		},
		onReachBottom() {
			//触底事件
			this.page = this.page + 1
			this.spikesGoodsList(this.spikes_activity_id)
		},
		methods: {
			//获取活动列表
			spikesActivityList() {
				spikes.spikesActivityList({}).then(res => {
					this.activity_data = res.data
					console.log("活动数据", this.activity_data)
					// 判断是否为空
					if (this.activity_data == null) {
						alert("当前没有活动开始")
						uni.navigateBack();
						return
					}
				})
			},
			//获取商品列表
			spikesGoodsList(spikes_id) {
				this.spikes_activity_id = spikes_id
				console.log("接收到的活动页码：：：", this.page);
				console.log("接收到的活动页码展示数量：：：", this.pageSize);
				console.log("接收到的活动ID：：：", this.spikes_activity_id);
				spikes.spikesGoodsList({
					page: this.page,
					page_size: this.pageSize,
					spikes_activity_id: this.spikes_activity_id,
				}).then(res => {
					console.log("后端返回的数据", res.data);
					// 检查返回的数据是否为空
					if (!res.data || res.data.length == 0) {
						alert("没有参与的秒杀商品", res.data);
						return
					}
					// 如果是第一页，直接赋值给 goods_data 数组
					if (this.page == 1) {
						this.goods_data = res.data; // 直接赋值
						console.log("第一页的商品数据", this.goods_data);
					} else {
						// 否则，将新数据拼接到 goods_data 数组末尾
						this.goods_data = this.goods_data.concat(res.data);
						console.log("拼接后的商品数据", this.goods_data);
					}
					this.isLoading = false;
				})
			},

			//返回
			onBack() {
				uni.navigateBack();
			},
			// 商品点击
			onGoods(goods_id, sku_id) {
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?type=' + 1 +
						'&goods_id=' + goods_id +
						'&activity_id=' + this.spikes_activity_id +
						'&sku_id=' + sku_id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'FlashSale.scss';
</style>